07. Exercise: The Box Model

Instructions

Exercise: The Box Model

You have just learned the four elements the browser needs in order to render a box model. Thankfully, with CSS, you can control each of them individually.

Understanding the CSS Box Model is crucial to being able to correctly layout a webpage.

See it with your own eyes

Wanna see every single "box" that makes up a page? Try putting this in the stylesheet temporarily:

* {
  border: 1px solid red !important;
}

Workspace

This section contains either a workspace (it can be a Jupyter Notebook workspace or an online code editor work space, etc.) and it cannot be automatically downloaded to be generated here. Please access the classroom with your account and manually download the workspace to your local machine. Note that for some courses, Udacity upload the workspace files onto https://github.com/udacity, so you may be able to download them there.

Workspace Information:

  • Default file path:
  • Workspace type: html-live
  • Opened files (when workspace is loaded): n/a

Next Concept